<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
    <link href="/assets/index/css/mui/mui.min.css" rel="stylesheet" />
    <style>
        body {
            font-family: 'Microsoft YaHei';
        }

        p {
            font-size: 4.5vw;
        }

        .title {
            margin: 20px 15px 10px;
            color: #6d6d72;
            font-size: 15px;
        }

        .userimg {
            border-radius: 50px;
        }
    </style>
    <title>详情页</title>
    <script src="/assets/index/js/jquery-1.9.1.min.js"></script>
</head>

<body>
    <div id="cover">
        <!-- 课程封面 -->
        <img src="{$subject.thumbs}" style="width:100%;" />

        <!-- 中间播放按钮 -->
        <div id="play" style="width:100%; height:50vw; text-align:center; line-height:80vw; position:absolute; top:0; ">
            <button id="confirmBtn" type="button" class="mui-btn mui-btn-blue mui-btn-outlined" style="border:0px;margin-top:50px;">
                <img style="width:20vw; height:20vw;" src="/assets/index/images/play.png" />
            </button>
        </div>
    </div>

    <!-- ckplayer视频容器元素 -->
    <video id="video" style="width:100%;display: none;" controls="controls"></video>

    <!-- 课程信息 -->
    <div class="weui-panel weui-panel_access" style="margin-top:5px;background:#fff;width:100%; height:30vw;padding:3%;">
        <div class="weui-panel__bd">
            <div class="weui-media-box weui-media-box_text">
                <!-- 标题 -->
                <h4 class="weui-media-box__title" style="padding-bottom:2%;">
                    {$subject.title}
                    <span id="likes" style="float:right; margin-right:10px; color:#6d6d72; font-size:3vw;">
                        {if condition="$likes_booler"}
                        <span class="mui-icon mui-icon-starhalf" style="color:red"></span>
                        <span id="zan" style="color:red;">{$like_num}</span>
                        {else /}
                        <span class="mui-icon mui-icon-starhalf"></span>
                        <span id="zan">{$like_num}</span>
                        {/if}
                        
                    </span>
                </h4>

                <!-- 价格 -->
                <h4 class="weui-media-box__title" style="color: #ff0000; font-weight: 600;padding-bottom:2%;">
                    ￥{$subject.price}元
                </h4>

                <!-- 描述 -->
                <p class="weui-media-box__desc">
                    {$subject.content}
                </p>
            </div>
        </div>
    </div>

    <!-- 课程列表 -->
    <div class="title" style="margin:10px 15px 10px ;">
        课程列表
    </div>
    <ul class="mui-table-view">
        {foreach $lists as $item}
        <li class="mui-table-view-cell mui-media">
            <a href="javascript:;">
                <div class="mui-media-body">
                    {$item.title}
                </div>
            </a>
        </li>
        {/foreach}
    </ul>
    <!-- 用户评论 -->
    <div class="title" style="margin:10px 15px 10px ;">
        当前章节用户评论
    </div>
    <ul class="mui-table-view">
        {foreach $comment as $item}
        <li class="mui-table-view-cell mui-media">
                <img class="mui-media-object mui-pull-left userimg" src="{$item.bus_text}" style="margin-top:5px ;">
                <div class="mui-media-body">
                    {$item.lists.title}
                </div>
                <div class="mui-media-body" style="margin-top: 5px;color:#ccc;">
                    用户评论：{$item.content}
                </div>
                <div class="mui-media-body" style="text-align: right;">
                    {$item.level}星好评
                </div>
        </li>
        {/foreach}
    </ul>
    <script src="/assets/index/js/mui.min.js"></script>
    <script src="/assets/index/js/mui.indexedlist.js"></script>
    <script src="/assets/index/ckplayer-x2/ckplayer/ckplayer.js"></script>
</body>

</html>
<script>
    $('#likes').click(function () {
        $.ajax({
            type: 'post',
            dataType: 'json',
            url:`{:url('/index/subject/likes')}`,
            data:{
                subid:`{$subject.id}`
            },
            success: function (success) {
                console.log(success);
                if(success.code == 0){
                    mui.toast(success.msg)
                    setTimeout(function(){
                    location.href=`{:url('/index/subject/subject',['subid'=>$subject['id']])}`
                    },2000)
                    return false
                }else{
                    mui.toast(success.msg)
                    setTimeout(function(){
                    location.href=`{:url('/index/subject/subject',['subid'=>$subject['id']])}`
                    },2000)
                    return false
                }
            },
            error:function(error){
                // console.log(error);
            }
        })
    })

    $('#confirmBtn').click(function(){
            $.ajax({
                url:`{:url('/index/subject/course')}`,
                data:{
                    subid:`{$subject.id}`
                },
                type:'post',
                dataType:'json',
                success:function(success){
                    if(!success.code){
                        if(success.msg == '请先登录'){
                            mui.toast(success.msg)
                            setTimeout(function(){
                                location.href=`{:url('/index/index/login',['subid'=>$subject['id']])}`
                            },2000)
                            return false
                        }
                        var show_msg = success.msg +',是否确认购买课程'

                        mui.confirm( show_msg, '购买课程', ['取消','确认购买'], function(e) {
                            if (e.index == 1) {
                                $.ajax({
                                    url:`{:url('/index/subject/play')}`,
                                    data:{
                                        subid:`{$subject.id}`
                                    },
                                    type:'post',
                                    dataType:'json',
                                    success:function(success){
                                        mui.toast(success.msg)
                                        return false
                                    },
                                })
                            }
                        },'div');
                    }else{
                        $('#cover').css('display','none'),
                        $('#video').css('display','block').attr(success.data)
                    }
                },
            })
            return false
    })
</script>